<%--
  Created by IntelliJ IDEA.
  User: 73786
  Date: 2021/4/18
  Time: 19:13
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>成绩查询</title>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<%--    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/canvas.js"></script>--%>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>

</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="row">
            <div class="col-md-4 column">
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/results/toAddResults">添加成绩</a>
                <a class="btn btn-primary" href="${pageContext.request.contextPath}/results/allResults">显示全部成绩</a>
            </div>
<%--            <div class="col-md-6 column">--%>
<%--                <form class="form-inline" action="" method="post" style="float: right">--%>
<%--                    <input type="text" name="" class="form-control" placeholder="请输入要查询的学生成绩"/>--%>
<%--                    <input type="submit" value="查询" class="btn btn-primary"/>--%>
<%--                </form>--%>
<%--            </div>--%>
        </div>
    </div>

    <div class="row clearfix">
        <div class="col-md-10 column">
            <table class="table table-hover table-striped">
                <thead>
                <tr>
                    <th>课程名</th>
                    <th>学生</th>
                    <th>成绩</th>
                    <th>操作</th>
                </tr>
                </thead>
                <!--                foreach-->
                <tbody>
                <c:forEach var="results" items="${resultsList}">
                    <tr>
                        <td>${results.cname}</td>
                        <td>${results.sname}</td>
                        <td><input type="text" value="${results.scope}" readonly style="border-top: 0px;border-left: 0px;border-right: 0px;border-bottom: 0px" /></td>
                        <td>
                            <a href="${pageContext.request.contextPath}/results/toUpdateResults?cname=${results.cname}">修改</a>
                            &nbsp; | &nbsp;
                            <a href="${pageContext.request.contextPath}/results/deleteResults?cname=${results.cname}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>

</div>
<div style="width: 80%;height: 420px;" >
    <div class="main" style="width: 500px;height: 400px; float: left" ></div>
    <div class="mains" style="width: 500px;height: 400px;margin-left: 600px"  ></div>
</div>

</body>
<script  type="text/javascript">
    window.onload = function() {

        var A=0;
        var B=0;
        var C=0;
        var D=0;
        var E=0;
        var list = document.getElementsByTagName("input");

        for (var i = 0; i < list.length && list[i]; i++) {
            if (list[i].type == "text") {
                if (list[i].value < 60) {
                    E++;
                } else if (list[i].value >= 60 && list[i].value < 70) {
                    D++;
                } else if (list[i].value >= 70 && list[i].value < 80) {
                    C++;
                } else if (list[i].value >= 80 && list[i].value < 90) {
                    B++;
                } else {
                    A++;
                }
                // strData +=list[i].id + list[i].value;
            }
        }
        // alert(A + " " + B + " " + C + " " + D + " " + E);

            var a = A;
            var b = B;
            var c = C;
            var d = D;
            var e = E;
            //1.实例化对象
            var myChart = echarts.init(document.querySelector(".main"));
            //2.指定配置
            var option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    top: '5%',
                    left: 'center'
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        //内圆 外圆大小
                        radius: ['40%', '70%'],
                        avoidLabelOverlap: false,
                        //图形上的文字
                        label: {
                            show: true,
                            // position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '20',
                                fontWeight: 'bold'
                            }
                        },
                        //链接文字的线
                        labelLine: {
                            show: true
                        },
                        //value是人数
                        data: [
                            {value: a, name: '90分以上'},
                            {value: b, name: '80~90分'},
                            {value: c, name: '70~80分'},
                            {value: d, name: '60~70分'},
                            {value: e, name: '60分以下'}
                        ]
                    }
                ]
            };
            //3.把配置给实例对象
            myChart.setOption(option);

            //
        //1.实例化对象
        var myChart = echarts.init(document.querySelector(".mains"));
        //2.指定配置
        var options = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '访问来源',
                    type: 'pie',
                    //内圆 外圆大小
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    //图形上的文字
                    label: {
                        show: true,
                        // position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '40',
                            fontWeight: 'bold'
                        }
                    },
                    //链接文字的线
                    labelLine: {
                        show: true
                    },
                    //value是人数
                    data: [
                        {value: a, name: 'A'},
                        {value: b, name: 'B'},
                        {value: c, name: 'C'},
                        {value: d, name: 'D'},
                        {value: e, name: 'E'}
                    ]
                }
            ]
        };
        //3.把配置给实例对象
        myChart.setOption(options);
        }
</script>
</html>
